<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.min.js"></script>
  </head>
  <body>
    <h1>get 两种写法</h1>
    <button id="btn">get 第一种</button>
    <button id="btn1">get 第二种</button>
    <h1>post 写法</h1>
    <button id="postBtn">post 第一种</button>
    <button id="postBtn2">post 第二种</button>
    <button id="postBtn3">post 第三种</button>
    <h1>qs详情</h1>
    <button id="QS">QS</button>
    <h1>fromData</h1>
    <button id="btn2">formData</button>
    <script>
      // axios.defaults.headers.post['Content-Type'] = 'text/plain'; // 配置请求头（推荐）
      // axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8'; // 配置请求头
      // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; // 配置请求头
      // axios.defaults.headers.post['Content-Type'] = 'multipart/form-data '; // 配置请求头
      axios({
        headers: {
          //   'Content-Type': 'application/x-www-form-urlencoded',
          'Content-Type': 'application/json',
        },
      });
      // axios 默认请求头 application/json; charset=utf-8
      axios.defaults.baseURL = 'http://localhost:8000';
      btn.addEventListener(
        'click',
        function () {
          //localhost:8000/server?ID=12345
          http: axios
            .get('/server', {
              params: {
                ID: 12345,
              },
            })
            .then(function (response) {
              console.log(response);
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        false
      );

      btn1.addEventListener(
        'click',
        function () {
          // http://localhost:8000/server?ID=12345
          axios
            .get('/server?ID=12345')
            .then(function (response) {
              console.log(response);
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        false
      );

      postBtn.addEventListener(
        'click',
        function () {
          let obj = { name: 2 };
          axios
            .post('/serverPost', obj)
            .then(function (response) {
              console.log(response);
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        false
      );
      postBtn2.addEventListener(
        'click',
        function () {
          axios
            .post('/serverPost', {
              code: '1234',
              name: 'yyyy',
            })
            .then(function (response) {
              console.log(response);
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        false
      );
      //无用
      postBtn3.addEventListener(
        'click',
        function () {
          let obj = { name: 2 };
          axios
            .post('/serverPost', JSON.stringify(obj))
            .then(function (response) {
              console.log(response);
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        false
      );

      QS.addEventListener(
        'click',
        function () {
          let data = { code: '1234', name: 'yyyy' };
          console.log(Qs.stringify(data)); //code=1234&name=yyyy
          let data2 = 'code=1234&name=yyyy';
          console.log(Qs.parse(data)); //{code: "1234", name: "yyyy"}
          //默认自动 application/x-www-form-urlencoded    不能设置json格式 不然会报错
          axios
            .post('/qs', Qs.stringify(data))
            .then(function (response) {
              console.log(response);
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        false
      );

      btn2.addEventListener(
        'click',
        function () {
          //默认自动  Content-Type: multipart/form-data
          var formData = new FormData();
          formData.append('user', 123456);
          formData.append('pass', 12345678);
          console.log(formData);
          axios
            .post('/fromData', formData)
            .then(function (response) {
              console.log(response);
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        false
      );
    </script>
  </body>
</html>
